<template>
	<view class="list-user">
		<u-search placeholder="请输入" v-model="keyword" @clear="handlerFilter" @search="handlerFilter" @custom="handlerFilter"></u-search>
		<uni-list v-if="filterList.length > 0">
			<u-checkbox-group @change="checkboxChange">
				<uni-list-item v-for="(v, k) in filterList" :key="k">
					<view slot="header" class="hd">
						<view class="item-title">{{ v.realname }}</view>
					</view>

					<u-checkbox slot="footer" v-model="v.checked" :name="v.userId" />
				</uni-list-item>
			</u-checkbox-group>
		</uni-list>
		<u-empty v-if="page >= 1 && !filterList.length" text="数据为空" mode="list"></u-empty>
	</view>
</template>

<script>
export default {
	name: 'listUser',
	data() {
		return {
			// 搜索词
			keyword: '',
			// 选中的值
			radio: '',
			selectValue: '',
			// 第几页
			page: 1,
			// 每页显示数量
			limit: 10,
			// 列表数据
			list: [],
			// 筛选后的列表
			filterList: [],
		};
	},
	watch: {
		keyword(val) {
			this.handlerFilter();
		},
	},
	mounted() {
		this.getList();
	},
	methods: {
		// 获取列表
		async getList() {
			let data = {
				pageType: 0,
			};
			let res = await this.$api.common.userList(data);
			if (res.code === 200) {
				let list = res.data || [];
				if (this.page === 1) {
					this.list = list;
				} else {
					this.list.push(...list);
				}

				// 赋值筛选列表
				this.filterList = list;
			}
		},
		// 筛选列表
		handlerFilter() {
			if (!this.keyword.trim()) {
				this.filterList = this.list;
				return;
			}
			// 简单筛选
			this.filterList = this.list.filter((v) => {
				return v.realname.indexOf(this.keyword) >= 0 || v.realname == this.keyword;
			});
		},
		// checkbox改变设置值
		checkboxChange(data) {
			this.$emit('selected', data.length, data.join(','));
		},
	},
};
</script>

<style lang="scss" scoped>
.list-user {
	.u-search,
	.uni-list {
		margin: 10px 15px !important;
	}

	.u-checkbox-group {
		display: block;
		flex-wrap: nowrap;
	}

	.uni-list /deep/ {
		margin-bottom: 50px;
		.uni-list-item {
			font-size: 14px;
		}
		.uni-list-item__container {
			padding: 12px 0;
			.hd {
				flex: 1;
			}
		}
		.uni-list-item__content {
			display: none;
		}
		.u-col {
			padding: 0 !important;
			color: #666;
		}
	}

	.u-load-more-wrap {
		padding: 20px 0;
	}
}
</style>